<template>
    <div>
        <el-dialog v-model="statusVisible" title="需求状态详情" width="800">
            <div>
                <div class="title">需求进度为系统根据当前的需求状态自动变化，运营人员只能选择当前进度内的选项，无法手动修改需求进度</div>
                <div class="mb-8">
                    <el-steps :active="active_num" finish-status="success" align-center>
                        <el-step title="需求发布中"></el-step>
                        <el-step title="需求对单中"></el-step>
                        <el-step title="需求已关闭"></el-step>
                        <el-step title="需求已合作"></el-step>
                    </el-steps>
                </div>
                <div class="flex pl-14" v-if="active_num == 0">
                    <el-radio-group v-model="radio" :disabled="true">
                        <el-radio :label="1">暂无渠道接单</el-radio>
                        <el-radio :label="2">无匹配渠道</el-radio>
                    </el-radio-group>
                </div>
                <div class="flex pl-14" v-if="active_num == 1">
                    <el-radio-group v-model="radio">
                        <el-radio :label="3">客户信息确认中</el-radio>
                        <el-radio :label="4">客户条件有限制，查询多，征信差</el-radio>
                        <el-radio :label="5">方案沟通中</el-radio>
                        <el-radio :label="6">约客户上门</el-radio>
                        <el-radio :label="7">费用沟通中</el-radio>
                    </el-radio-group>
                </div>
                <div class="flex pl-14" v-if="active_num == 2">
                    <el-radio-group v-model="radio">
                        <el-radio :label="8">用户自主关闭</el-radio>
                        <el-radio :label="9">客户无需求</el-radio>
                        <el-radio :label="10">客户条件差</el-radio>
                        <el-radio :label="11">不接受渠道费</el-radio>
                        <el-radio :label="12">平台主动关闭</el-radio>
                    </el-radio-group>
                </div>
                <div v-if="active_num == 3" class="result pl-14">已与渠道<span class="result-txt">{{ channel_real_name }}</span>达成合作</div>
            </div>
            <template #footer>
              <div class="dialog-footer">
                  <el-button @click="() => {statusVisible = false}">取消</el-button>
                  <el-button type="primary" @click="onRight">确认</el-button>
              </div>
          </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="statusDialog">
import { getProgress, updateProgress } from '@/api/demand/lists';
import feedback from '@/utils/feedback'

const statusVisible = ref(false)

defineExpose({
    dialogVisible(res: any){
        nextTick(()=>{
            init(res)
        })
    }
})
const emit = defineEmits(['change'])

const active_num = ref(0)
const radio = ref(3)
const channel_real_name = ref('')
const demand_id = ref()

const init = async(data:any) => {
    console.log(data)
    statusVisible.value = true;
    demand_id.value = data.id;
    const res = await getProgress({
        id: data.id
    })
    console.log(res)
    active_num.value = (res.progress_master - 1)
    radio.value = Number(res.progress_sub)
    channel_real_name.value = res.channel_real_name;
}

const onRight = async () => {
    if (active_num.value == 3 || active_num.value == 0) {
        statusVisible.value = false;
    } else {
        const res = await updateProgress({
            id: demand_id.value,
            progress_sub: radio.value
        })
        feedback.msgSuccess('状态修改成功')
        statusVisible.value = false;
        emit('change')
    }
}


</script>
<style lang="scss" scoped>

.title{
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}
.result{
    font-size: 16px;
    .result-txt{
        color: #FF6900;
        font-weight: bold;
    }
}
</style>